<!-- <link rel="stylesheet" href="path/to/font-awesome/css/all.min.css"></link> -->
<template>
    
    <div class="app-container">
   
        <!-- <div>
            <el-button type="primary">
            <i class="el-icon-search"></i>搜索
            </el-button>
        </div> -->
        <!-- <div id="tableContainer"> -->
        <el-input
            v-model="roleName"
            placeholder="商品编码"
            style="width: 100px"
            class="filter-item"
        />
        <el-input
            v-model="roleName2"
            placeholder="商品名称"
            style="width: 100px"
            class="filter-item"
        />
        <el-input
            v-model="roleName3"
            placeholder="最小价格:"
            style="width: 90px"
            class="filter-item"
        />
        <el-input
            v-model="roleName4"
            placeholder="最大价格:"
            style="width: 90px"
            class="filter-item"
        />
        
        
        <!-- <el-radio-group v-model="roleName3" class="filter-item" style="margin-left: 10px; margin-right: 10px;">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
        </el-radio-group> -->
  
        <el-button
            @click="resetInputs"
            style="background-color: pink; margin-left: 10px"
        >
            <!-- 重置 -->
            <i class="fas fa-sync-alt"></i>
        </el-button>
  
        <!-- 搜索00 -->
        <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
        >
        </el-button>
        <el-button
            class="filter-item"
            style="margin-left: 10px;color: #000;background-color: yellow;"
            type="primary"
            @click="dialogAddVisible = true"
        >
            <!-- 添加房源 -->
            <i class="fa-solid fa-plus"></i>
        </el-button>
        <el-button
            class="filter-item"
            style="margin-left: 10px;color: #000;background-color: blueviolet;"
            type="danger"
            @click="deleteRoleBatch()"
        >
            <!-- 批量删除 -->
            <i class="fas fa-trash-alt"></i>
        </el-button>

        <!-- =========================== -->


        <el-button
            @click="importExcel()"
            style="background-color: rgb(192, 221, 255); margin-left: 10px"
        >
            <!-- 导入 -->
            <i class="fas fa-upload"></i>
        </el-button>

        <el-button
            @click="exportExcel()"
            style="background-color: rgb(255, 192, 233); margin-left: 10px"
        >
            <!-- 导出 -->
            <i class="fas fa-download"></i>
        </el-button>

        <!-- =========================== -->

        <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
        <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="排序" width="60" align="center">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
  
            <!-- <el-table-column label="标题" width="100" align="center">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="房子款式" width="110" align="center" :formatter="formatStatus2">
                
            </el-table-column> -->
  
            <el-table-column label="商品编号" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.productId}}</span>
                </template>
            </el-table-column>
  
            
           <!-- <el-table-column align="center" width="110" prop="url" label="商品图片">
                <template slot-scope="scope">
                    <el-popover placement="right" title="" trigger="hover">
                        <img :src="scope.row.thumbnail" style="height: 200px;width: 400px">
                        <img slot="reference" :src="scope.row.thumbnail" :alt="scope.row.thumbnail" style="max-height: 50px;max-width: 130px">
                    </el-popover>
                </template>
            </el-table-column> -->

            <el-table-column align="center" width="110" prop="url" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.thumbnail" style="height: 50px; width: 90px">
                </template>
            </el-table-column>

  
            <el-table-column label="商品名称" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.productName}}</span>
                </template>
            </el-table-column> 

            <el-table-column label="商品类目" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.productCategory}}</span>
                </template>
            </el-table-column> 

            <el-table-column label="商品类型" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.productType}}</span>
                </template>
            </el-table-column> 

            <el-table-column label="价格" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.price}}</span>
                </template>
            </el-table-column> 

            <el-table-column label="单位" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.unit}}</span>
                </template>
            </el-table-column> 

            <el-table-column label="商品属性" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.productStats}}</span>
                </template>
            </el-table-column> 

            <el-table-column label="属性" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.stats}}</span>
                </template>
            </el-table-column> 
  
            <!-- <el-table-column label="是否展示" width="110" align="center" :formatter="formatStatus">
                
            </el-table-column> -->
  
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit1(scope.$index, scope.row)"
                        >
                        <!-- 编辑 -->
                        <i class="fas fa-edit"></i>
                        </el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >
                        <!-- 删除 -->
                        <!-- <i class="fa-solid fa-minus"></i> -->
                        <i class="el-icon-delete"></i>
                        </el-button
                    >
                </template>
            </el-table-column>
           
        </el-table>
        <div class="block">
            <el-pagination
  
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
  
        <el-dialog title="新增商品" :visible.sync="dialogAddVisible">
            <el-form :model="form">
                <el-form-item label="商品编码" :label-width="formLabelWidth">
                    <!-- <el-input v-model="form.title" autocomplete="off"></el-input> -->
                    <el-input v-model="form.productId" autocomplete="off"></el-input>
  
                </el-form-item>
  
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.productName" auto-complete="off"></el-input>
                    <!-- <el-input  auto-complete="off"></el-input> -->
  
                </el-form-item>
  
                <el-form-item label="缩略图" :label-width="formLabelWidth">
                    <el-input v-model="form.thumbnail" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品类目" :label-width="formLabelWidth">
                    <el-input v-model="form.productCategory" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品类型" :label-width="formLabelWidth">
                    <el-input v-model="form.productType" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="单位" :label-width="formLabelWidth">
                    <el-input v-model="form.unit" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品属性" :label-width="formLabelWidth">
                    <el-input v-model="form.productStats" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="属性" :label-width="formLabelWidth">
                    <el-input v-model="form.stats" auto-complete="off"></el-input>
                </el-form-item>
  
  
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="addProduct()">确 定</el-button>
            </div>
        </el-dialog>
  
        
  
  
  <el-dialog title="更新商品信息" :visible.sync="dialogUpdateFormVisible">
    <el-form :model="form">
        <el-form-item label="商品编码" :label-width="formLabelWidth">
                    <!-- <el-input v-model="form.title" autocomplete="off"></el-input> -->
                    <el-input v-model="form.productId" autocomplete="off"></el-input>
  
                </el-form-item>
  
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.productName" auto-complete="off"></el-input>
                    <!-- <el-input  auto-complete="off"></el-input> -->
  
                </el-form-item>
  
                <el-form-item label="缩略图" :label-width="formLabelWidth">
                    <el-input v-model="form.thumbnail" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品类目" :label-width="formLabelWidth">
                    <el-input v-model="form.productCategory" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品类型" :label-width="formLabelWidth">
                    <el-input v-model="form.productType" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="单位" :label-width="formLabelWidth">
                    <el-input v-model="form.unit" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品属性" :label-width="formLabelWidth">
                    <el-input v-model="form.productStats" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="属性" :label-width="formLabelWidth">
                    <el-input v-model="form.stats" auto-complete="off"></el-input>
                </el-form-item>
                
            </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateFormVisible = false,resetInput"
            >取 消</el-button
        >
        <!-- <el-button @click="handleCancelAndReset">取消</el-button> -->
        <el-button type="primary" @click="updateBuilding()">确 定</el-button>
    </div>
  </el-dialog>


  <!-- 上传excel对话框 -->
  <el-dialog :visible.sync="importExcelVisible" width="30%">
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8080/product/import"
        name="file"
        method="post"
        accept=".xlsx,.xls"
        :on-success="importSuccessFunction"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>

  </div>
  <!-- </div> -->
  </template>
  
  
  <script>
  
  import { pageInfo, addProduct,deleteById,getById,updateBuilding,delteBatch } from "@/api/firm/firm";
  // main.js
  
  import '@fortawesome/fontawesome-free/css/all.css' // 引入Font Awesome的CSS样式
  
  //   ##########################################################################################
  import Vue from 'vue';
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css'; // 引入 Element UI 的 CSS 样式
  Vue.use(ElementUI);
  
  
  export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
  
    data() {
        return {
            list: null,
            listLoading: true,
            formLabelWidth: "120px",
            dialogUpdateFormVisible: false,
            dialogAddVisible: false,
            dialogVisible: false,
            importExcelVisible: false,
            form: {
                // id:"",
                buildingCode: "",
                buildingName: "",
                buildingArea: ""
                
            },
            currentPage: 1,
            pageSize: 5,
            total: 10,
            roleName: "",
            roleName2: "",
            roleName3: "",
            roleName4: "",

            ids:[],
            isDisabled: false
        };
    },
    
  
    created() {
        this.loadData();
    },
    methods: {
        // formatStatus(row, column) {
        //     return row.display == 1 ? "是" : row.display == 0 ? "否" : "未作备注";
        // },
  
        formatStatus(row, column) {
            return row.display == 1 ? <i class="fas fa-check"></i> : 
            row.display == 0 ? <i class="fas fa-times"></i> : 
            row.display == 2 ? <i class="fa-solid fa-plus "></i> : 
            row.display;
        },
  
        formatStatus2(row, column) {
            return row.title == 1 ? <i class="fa-solid fa-house"></i> : 
            row.title == 0 ? <i class="fa-regular fa-house"></i> : 
            row.title == 2 ? <i class="fa-light fa-house"></i> : 
            row.title == 3 ? <i class="fa-duotone fa-house"></i> : 
            row.title == 4 ? <i class="fa-thin fa-house"></i> : 
            row.title;
        },
  
  
        resetInputs() {
            this.roleName = '';
            this.roleName2 = '';
            this.roleName3 = '';
            this.roleName4 = '';
        },
  
        resetInputs2() {
            this.form = "";
            this.isDisabled = false;
        },


        // ================

        // 导出excel
    exportExcel(){
      this.$confirm('确定要导出数据吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 方案1: 原生js方式发起导出excel请求,后端设置响应格式
        window.location.href = "http://localhost:8080/product/export"
        // 方案1的话后端需要设置响应格式和内容


        // 方案2: 使用axios默认是不行的,需要额外配置
        // 方案2的话后端就不需要设置响应,直接导出就行
        axios.request({
          url: '/api/sysUser/export',
          method: 'get',
          responseType: 'blob',
        }).then(ret=>{
          this.download(ret,"系统用户信息")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已导出数据！'
        })
      })
    },

        // 导入excel
         importExcel(){
        this.importExcelVisible = true;
        },
        // 导入excel 成功的回调
        importSuccessFunction(){
        this.importExcelVisible = false;
        },
        // ================
  
    
  
        handleFilter() {
            this.loadData();
        },
        handleSelectionChange(val) {
            
            for(var i = 0; i < val.length; i++) {
                this.ids[i] = val[i].id
            }
            console.log(this.ids);
        },
        deleteRoleBatch() {
            this.openDelConfirm("多条记录").then(() => {
                // data: [1, 2, 3 ]
                delteBatch(this.ids).then((res)=>{
                    if(res.code == 200) {
                        this.loadData();
                    }
                })
            });
            
        },
        loadData() {
            this.listLoading = true;
            pageInfo({
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                productId: this.roleName,
                productName: this.roleName2,
                PriceMin: this.roleName3,
                PriceMax: this.roleName4

                
            }).then((response) => {
                this.list = response.data.dataList;
                this.total = response.data.total;
                this.listLoading = false;
            });
        },
        addProduct() {
            addProduct(this.form).then((response) => {
                this.dialogAddVisible = false;
                this.loadData();
            });
        },
        // cl(){this.form=""},
        updateBuilding() {
            updateBuilding(this.form).then((response) => {
                this.dialogUpdateFormVisible = false;
                this.loadData();
            });
        },



        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.loadData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.loadData();
        },
        handleEdit1(index, row) {
            getById({ id: row.id }).then((response) => {
                this.form = response.data;
                this.dialogUpdateFormVisible = true;
            });
        },
        openDelConfirm(name) {
            return this.$confirm(`此操作将删除 ${name}, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            });
        },
  
        handleDelete(index, row) {
            this.openDelConfirm(row.buildingName).then(() => {
                deleteById({ id: row.id }).then((response) => {
                    this.loadData();
                });
            });
        },
    },
  };
  </script>
  
  <style>
  #tableContainer {
    border-width: 2px; /* 设置表格线条粗细为2像素 */
    border-color: green; /* 设置表格线条颜色为绿色 */
  }
  </style>
  